import React, { Component } from 'react';
import { StyleSheet, Text, View, Dimensions, Image, TouchableOpacity, TextInput } from "react-native";
import { offerStyle } from './offerStyle';
import { TimeDayCpt } from './TimeDayCpt';
import Utils from '../../../../../utils/utils';


const ScreenWidth = Dimensions.get('window').width;
const scale = ScreenWidth / 375;

export class CheckBoxCpt extends Component {

	constructor(props) {
		super(props);
		let { data } = props || {};
		data = this._selectInitData(data);
		this.state = {
			data
		}
	}

	componentWillReceiveProps(props) {
		let { data, } = props || {};
		data = this._selectInitData(data);
		this.setState({
			data,
		})
	}

	_selectInitData = (data) => {
		if (data && data.listData) {
			data.listData && data.listData.map((item) => {
				item.checked = this._isHas(data.selectKeyArr, item.dictKey);
				return item;
			})
		}
		return data;
	}


	//勾选初始化
	_isHas = (selectKeyArr, key) => {
		let reslute = false;
		selectKeyArr && selectKeyArr.forEach(item => {
			if (item == key) {
				reslute = true;
			}
		})
		return reslute
	}


	// 选中函数
	_select = (selectKey, index, readOnly) => {
		if (readOnly) {
			return
		}
		let { callBack } = this.props;
		let { data } = this.state;
		let { selectKeyArr, listData, id } = data || {};

		console.log('selectKey-99999999', selectKey, index);


		if (listData[index].checked) {
			listData[index].checked = false;
			let lsSelectKeyArr = [];
			selectKeyArr && selectKeyArr.forEach((item, index) => {
				if (item != selectKey) {
					lsSelectKeyArr.push(item)
				}
			})

			data.selectKeyArr = lsSelectKeyArr;
		} else {
			listData[index].checked = true;
			selectKeyArr.push(selectKey);
		}

		this.setState({
			data
		}, () => {
			console.log('勾选后', data);
			if (id === "payTypeArry" && data.selectKeyArr && data.selectKeyArr.indexOf('2') == -1) { // 去掉定金比例
				data.prepayRate = null;
				callBack && callBack({ [id]: data.selectKeyArr, prepayRate: data.prepayRate });
			} else {
				callBack && callBack({ [id]: data.selectKeyArr });
			}
		})

	}


	_planeCallback = (planeData) => {
		let { callBack } = this.props;
		callBack && callBack(planeData);
	}

	_addFontWeight = (selectKeyArr, dictKey) => {
		return selectKeyArr.includes(dictKey) ? offerStyle.fontBold : null
	}

	render() {
		let { callBack } = this.props;
		let { data } = this.state || {};
		let { title, listData, layStyle, required, type, other, selectKeyArr, id, prepayRate } = data || {};
		let { selectKey } = this.state;
		const checkOn = require('../../../../../imgs/order/select-on.png');
		const checkOff = require('../../../../../imgs/order/select-off.png');
		console.log('我是复选框,999999999', data, selectKeyArr && selectKeyArr.indexOf('2'))
		return (
			<View style={offerStyle.lineBox}>
				<View style={[offerStyle.row, offerStyle.lay, layStyle || null]}>
					{required ? <Text style={[offerStyle.radioRequire, offerStyle.required]}>*</Text> : null}
					<Text style={styles.fontSize}>{title || '-'}:</Text>
				</View>
				<View style={{ width: 260 * scale }}>
					{
						type == 'time-day' ? <TimeDayCpt data={other} event={{ planeCallback: this._planeCallback }} /> : (
							<View style={[offerStyle.row, offerStyle.rightBox]}>
								{
									listData && listData.map((item, index) => {
										return (
											<TouchableOpacity onPress={() => { this._select(item.dictKey, index, item.readOnly) }} key={index} style={[offerStyle.row, styles.radioItem]}>
												<Image source={item.checked ? checkOff : checkOn} style={item.readOnly ? offerStyle.checkBoxRead : offerStyle.checkBoxImg} />
												<Text style={[offerStyle.fontSize, selectKey == item.dictKey ? offerStyle.fontBold : null, this._addFontWeight(selectKeyArr, item.dictKey)]}>{item.dictName}</Text>
											</TouchableOpacity>
										)
									})
								}
							</View>
						)
					}

					{
						(id === "payTypeArry" && selectKeyArr && selectKeyArr.indexOf('2') != -1) ? <View style={{ flexDirection: 'row', alignItems: 'center' }}>
							<Text style={offerStyle.fontSize}><Text style={[offerStyle.radioRequire, offerStyle.required]}>* </Text> 定金比例</Text>
							<TextInput
								style={styles.inputStyle}
								defaultValue={Utils.numberToString(prepayRate)}
								placeholder={'请输入'}
								placeholderTextColor={"#aaa"}
								underlineColorAndroid='transparent'
								keyboardType={'numeric'}
								onChangeText={(value) => {
									callBack && callBack({ 'prepayRate': value });
								}} />
							<Text>%</Text>
						</View> : null
					}
				</View>
			</View>
		)
	}
}

const styles = StyleSheet.create({
	radioItem: {
		marginRight: 25 * scale,
		marginBottom: 15 * scale,
		alignItems: 'center'
	},
	inputStyle: { width: 120 * scale, textAlign: 'center' }
})